<template>
  <div class="box">
    <router-link to="/">

    <van-nav-bar
      title="风险等级表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    </router-link>
    <div class="header">
      <div>地区</div>
      <div>现有</div>
      <div>累计</div>
      <div>治愈</div>
      <div>死亡</div>
      <div @click="touch()">
        风险等级
        <img src="..\..\public\image\mini_img\none.png" alt="" class="pic1"
        v-if="this.index ===2"/>
        <img src="..\..\public\image\mini_img\up.png" alt="" class="pic1"
        v-else-if="this.index % 2 !== 0"/>
        <img src="..\..\public\image\mini_img\down.png" alt="" class="pic1"
        v-else-if="this.index % 2 === 0"/>
      </div>
    </div>
    <div v-for="(item, i) in cname" :key="i" class="content">
      <div>{{ item.name }}</div>
      <div>{{ item.econNum }}</div>
      <div>{{ item.value }}</div>
      <div>{{ item.cureNum }}</div>
      <div>{{ item.deathNum }}</div>
      <div v-if="item.econNum > 0 && item.econNum <= 79">全部低风险</div>
      <div v-else-if="item.econNum >= 80 && item.econNum <= 300" class="middle">
        部分中风险
      </div>
      <div v-else-if="item.econNum >= 301" class="hight">部分中高风险</div>
      <div v-else-if="item.econNum == 0">全部低风险</div>
    </div>
  </div>
</template>
<script>
import jsonp from "jsonp";
export default {
  data() {
    return {
      cname: null,
      index: 2,
      // num:'remove'
    };
  },
  mounted() {
    this.getData();
    //  this.touch()
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    getData() {
      //从新浪取到json数据
      jsonp(
        `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
        {},
        (err, res) => {
          if (!err) {
            var data = res.data.list;
            let cname = [];
            for (let i = 0; i <= 33; i++) {
              let name = data[i];
              cname.push(name);
            }
            this.cname = cname;
            
          }
        }
      );
    },
    // 定义方法根据点击次数来进行排序
    touch() {
      this.index++;
      jsonp(
        // 接口
        `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
        {},
        (err, res) => {
          if (!err) {
            var data = res.data.list;
            let cname = [];
            this.cname = cname;
            for (let i = 0; i <= 33; i++) {
              let name = data[i];
              cname.push(name);
              let ename = cname[i].econNum;
              let num = parseInt(ename);
              for (var j = 0; j < cname.length; j++) {
                if (cname[i].susNum == "0") {
                  cname[i].econNum = num;
                }
              }
            }
            // 如果点击次数为奇数，则进行降序排序
            if (this.index % 2 !== 0) {
              cname.sort(compareDown("econNum"));
              function compareDown(propertyName) {
                // 降序排序
                if (typeof data[0][propertyName] != "number") {
                  // 属性值为非数字
                  return function (object1, object2) {
                    var value1 = object1[propertyName];
                    var value2 = object2[propertyName];
                    return value2.localeCompare(value1);
                  };
                } else {
                  return function (object1, object2) {
                    // 属性值为数字
                    var value1 = object1[propertyName];
                    var value2 = object2[propertyName];
                    return value2 - value1;
                  };
                }
              }
              // 如果点击次数为偶数，则进行升序排序
            }else if (this.index % 2 === 0){
             cname.sort(compareDown("econNum"));
            function compareDown(propertyName) {
              // 降序排序
              if (typeof data[0][propertyName] != "number") {
                // 属性值为非数字
                return function (object1, object2) {
                  var value1 = object1[propertyName];
                  var value2 = object2[propertyName];
                  return value2.localeCompare(value1);
                };
              } else {
                return function (object1, object2) {
                  // 属性值为数字
                  var value1 = object1[propertyName];
                  var value2 = object2[propertyName];
                  return   value1 - value2
                };
              }
             }
            }
          }
        }
      );
    },
  },
};
// 定义定时器来获取实时数据
let yqTime = setInterval(function () {
  let fyTime = new Date().valueOf();
}, 3600000);
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  /* position: fixed; */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #bbb;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.header > div {
  width: 2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.5rem;
}
.content > div {
  /* box-sizing: border-box; */
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: 0.45rem;
}
.content div:nth-child(1) {
  color: rgb(102, 119, 211);
}
.content div:nth-child(6) {
  width: 4rem;
}
.header div:nth-child(1) {
  background-color: rgba(172, 176, 181, 0.3);
}
.header div:nth-child(2) {
  background-color: rgba(238, 130, 72, 0.3);
  /* position: relative; 
    width: 3rem; */
  /* line-height: 24px; */
  color: rgb(225, 50, 31);
}
.header div:nth-child(3) {
  background-color: rgba(242, 158, 152, 0.3);
  color: rgb(221, 32, 32);
}
.header div:nth-child(4) {
  background-color: rgba(177, 242, 152, 0.3);
  color: rgb(30, 150, 74);
}
.header div:nth-child(5) {
  background-color: rgba(160, 166, 174, 0.3);
}
.header div:nth-child(6) {
  /* position: relative; */
  background-color: rgba(128, 135, 143, 0.3);
  width: 4rem;
}
.pic1 {
  width: 4%;
  position: absolute;
}
.pic1 {
  margin-top: 0.2rem;
  left: 14.8rem;
}
.middle{
  color: #ccc609;
}
.hight{
  color: red;
}
</style>